<template>
  <div class="home-login">
    <el-row :gutter="20" class="login-row" type="flex"  align="middle">
      <el-col :span="5" :offset="15" class="">
        <el-card class="login-card">
          <el-form   label-width="80px"  :model="account" :rules="rules" ref="account" >
            <el-row :gutter="10" type="flex" justify="center">
             <el-col :span="18" class="login-form-type">
               <el-link type="primary" disabled>账户登入</el-link>
               <span> | </span>
               <el-link type="info">扫码登入</el-link>
             </el-col>
            </el-row>
            <el-form-item label="用户名" prop="phone">
              <el-input v-model="account.phone"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" >
              <el-input v-model="account.password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login">提交</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-form>
<!--          忘记密码立即注册-->
          <el-row :gutter="10" type="flex" justify="end">
           <el-col :span="10">
             <el-link @click="$router.push({name:'register'})">立即注册</el-link>
             <span> | </span>
             <el-link>忘记密码</el-link>
           </el-col>
          </el-row>
<!--          其他登入方式-->
<!--          <div class="el-divider">-->
<!--            其他登入方式-->
<!--          </div>-->
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from '../../../request/home/login'
export default {
  name: 'Login',
  data () {
    var phone = (rule, value, callback) => {
      if (!(/^1[3456789]\d{9}$/.test(value))) {
        return callback(new Error('手机号不正确'))
      }
      return callback()
    }
    return {
      account: {
        name: '',
        password: ''
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: phone, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    login () {
      // 表单验证
      console.log(sessionStorage.getItem('XSRF-TOKEN'))
      this.$refs.account.validate((valid) => {
        if (!valid) {
          return false
        }
        request.login(this.account)
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .home-login {
    width: 100%;
    height: 550px;
    overflow-x:hidden;
    background: url("https://x.dscmall.cn/storage/data/afficheimg/1564453243544166182.jpg");
    .login-row {
      height: 550px;
    }
    .login-card {

      .login-form-type {
       margin-bottom: 20px;
        /deep/ span {
          padding: 5px;
          font-size: 24px;
        }
      }
    }
  }
</style>
